<template>
	<view class="container">
		<view class="header">
			<view class="tops">
				<uni-steps :options="data.list" active-icon="checkbox" :active="data.active" />
			</view>
			<view class="bottoms" v-if="data.active==1">
				<view class="title">
					商家确认中
				</view>
				<view class="desc">
					处理时间3天，若处理超时，退款申请将自动通过
				</view>
			</view>
			<view class="bottoms" v-if="data.list.length==4&&data.active==3||data.list.length==3&&data.active==2">
				<view class="title">

					{{data.goods.state==3?"商家已拒绝":"商家已同意"}}
				</view>
				<view class="desc">
					{{data.goods.state==3?'拒绝原因:'+data.goods.refuse:"已退款"}}
				</view>
			</view>
			<view class="bottoms" v-if="data.list.length==4&&data.active==2">
				<view class="title">

					{{!data.isfh?"等待商品寄出":"商品已寄出"}}
				</view>
				<view class="desc">

					{{!data.isfh?"商家已确认申请，用户需在24小时内寄出商品":"商家确认收货中"}}
				</view>
			</view>
		</view>
		<view class="goodslist">
			<view class="item" v-for="item in data.goodslist" :key="item.ID">
				<view class="imgs">
					<image :src="item.goods.img" mode=""></image>
				</view>
				<view class="name">
					<view class="name">
						{{item.goods.name}}
					</view>
					<view class="name">
						{{item.money}}
					</view>
				</view>
			</view>
		</view>
		<view class="titlebox" v-if="data.list.length==4&&data.active==2">
			<view class="titleitem">
				<view class="left">
					收货人
				</view>
				<view class="right">
					{{data.address.name}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					收货人电话
				</view>
				<view class="right">
					{{data.address.mobile}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					收货地址
				</view>
				<view class="right">
					{{data.address.address}}
				</view>
			</view>
		</view>
		<view class="titlebox" v-if="data.list.length==4&&data.active==2">
			<view class="titleitem">
				<view class="left">
					物流状态
				</view>
				<view class="right">
					{{!data.isfh?"待寄出":"已寄出"}}
				</view>
			</view>
		</view>
		<view class="titlebox">
			<view class="titleitem">
				<view class="left">
					服务类型
				</view>
				<view class="right">
					{{data.goods.refunds_type==1?"仅退款":"退货退款"}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					申请原因
				</view>
				<view class="right">
					{{data.goods.reason}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					服务编号
				</view>
				<view class="right">
					{{data.goods.orders}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					退款金额
				</view>
				<view class="right">
					{{$toFiexd(data.goods.money,2)}}
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					退款方式
				</view>
				<view class="right">
					原路返回
				</view>
			</view>
			<view class="titleitem">
				<view class="left">
					申请时间
				</view>
				<view class="right" v-if="data.goods.CreatedAt">
					{{$clearTime(data.goods.CreatedAt)}}
				</view>
			</view>
		</view>
		<view style="height: 73px;">

		</view>
		<view class="footer"  v-if="data.list.length==4&&data.active==2&&!data.isfh">
			<!-- 			<view class="left">
				取消订单
			</view> -->
			<view class="right" @click="popup.open('bottom')">
				我已寄出
			</view>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup">
			<view class="popupbox">
				<view class="title">填写退货物流</view>
				<uni-icons class="closeempty" type="closeempty" size="22" @click="popup.close()"></uni-icons>
				<view class="waybillbox waybillboxs">
					<view class="titles">
						快递单号
						<input type="text" placeholder="请填写快递单号" v-model="data.form.waybill">
					</view>
					<view class="waybill">
						<!-- #ifndef H5 -->
						<image v-if="false" src="https://img.fubaozx.cn/static/oldImg/16995022764919.png" mode=""></image>
						<view v-if="false" class="">
							拍快递单
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="waybillbox waybillboxs">
					<view class="titles">
						物流公司
					</view>
					<view class="waybill">
						<uni-data-select v-model="data.value" :localdata="data.lists" @change="radioChangess"
							placeholder="请选择物流公司"></uni-data-select>
					</view>
				</view>
				<view class="btns" @click="applyRefunds">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
	const data = reactive({
		active: 1,
		value: '',
		address:{},
		lists: [{
				text: "顺丰",
				value: 0
			},
			{
				text: "邮政",
				value: 1
			},
			{
				text: "中通",
				value: 2
			},
			{
				text: "圆通",
				value: 3
			},
			{
				text: "申通",
				value: 4
			},
			{
				text: "京东",
				value: 5
			},
			{
				text: "百世快递",
				value: 6
			},
			{
				text: "京东",
				value: 7
			},
			{
				text: "韵达",
				value: 8
			},
			{
				text: "德邦",
				value: 9
			},
			{
				text: "天天",
				value: 10
			},
			{
				text: "其他",
				value: 11
			}
		],
		list: [{
			title: '申请退款'
		}, {
			title: '商家处理'
		}, {
			title: '寄出商品'
		}, {
			title: '退款处理'
		}],
		form: {
			order: '',
			waybill: '',
			logistics: ''
		},
		goodslist: [],
		goods: {},
		isfh:false
	})
	let popup = ref()
	onLoad((option) => {
		data.form.order = option.id
		refundDetails(option.id)

	})
	onShow(() => {
	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})

	function radioChangess(e) {
		console.log(e)
		data.value = e
		data.form.logistics = data.lists[e].text
	}

	function refundDetails(id) {
		proxy.$request({
			url: `api/applyRefunds/?order=${id}`,
			method: 'get',
			success(res) {

				data.goodslist = res.data
				data.goods = res.data[0]
				getBusinessRefundsAddress()
				if (res.data[0].refunds_type == 1) {
					data.list = [{
						title: '申请退款'
					}, {
						title: '商家处理'
					}, {
						title: '退款处理'
					}]
					if (res.data[0].state == 4) {
						data.active = 2
					}
					if (res.data[0].state == 3) {
						data.active = 2
					}
				} else {
					if (res.data[0].state == 1) {
						data.active = 2
					}
					if (res.data[0].state == 2) {
						data.isfh=true
						data.active = 2
					}

					if (res.data[0].state == 3) {
						data.active = 3
					}
					if (res.data[0].state == 4) {
						data.active = 3
					}

				}
			}
		})
	}
	function getBusinessRefundsAddress(){
		proxy.$request({
			url: `api/getBusinessRefundsAddress/?id=${data.goods.business_id}`,
			method: 'get',
			success(res) {
				data.address=res.data
			}
		})
	}
	function applyRefunds() {
		proxy.$request({
			url: `api/applyRefunds/`,
			method: 'PUT',
			data: data.form,
			success(res) {
				popup.value.close()
				refundDetails(data.form.order)
				uni.showToast({
					icon: 'none',
					title:res.errmsg
				})
			}
		})
	}

</script>

<style lang="scss" scoped>
	.container {
		padding: 30upx;

		.header {
			background-color: #fff;
			padding: 30upx;
			border-radius: 30upx;

			.bottoms {
				margin-top: 30upx;
				padding-top: 30upx;
				border-top: 1upx solid #eee;

				.title {
					font-size: 28upx;
					font-weight: bold;
				}

				.desc {
					font-size: 24upx;
					color: #999;
					margin-top: 10upx;
				}
			}
		}

		.goodslist {
			.item {
				background-color: #fff;
				padding: 30upx;
				margin-top: 30upx;
				border-radius: 30upx;
				display: flex;

				.imgs {
					width: 200upx;
					height: 200upx;
					margin-right: 20upx;

					image {
						width: 200upx;
						height: 200upx;
						border-radius: 30upx;
					}
				}
			}
		}

		.titlebox {
			background-color: #fff;
			border-radius: 30upx;
			margin-top: 30upx;
			padding: 15upx;

			.titleitem {
				display: flex;
				font-size: 28upx;
				padding: 15upx;
				justify-content: space-between;

				.left {
					color: #666;
				}

				.right {
					font-weight: bold;
				}
			}
		}

		.footer {
			width: calc(100% - 60upx);
			padding: 30upx;
			padding-bottom: 60upx;
			position: fixed;
			background-color: #fff;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: flex-end;

			.left {
				font-size: 24upx;
				color: #666;
				padding: 10upx 30upx;
				border-radius: 30upx;
				border: 1upx solid #666;
			}

			.right {
				font-size: 24upx;
				color: #fff;
				padding: 10upx 40upx;
				border-radius: 30upx;
				background-color: $color1;
				border: 1upx solid $color1;
				margin-left: 20upx;
			}
		}
	}

	.popupbox {
		padding: 30upx;
		background-color: #f5f5f5;
		border-radius: 60upx 60upx 0 0;
		position: relative;
		height: 70vh;

		.title {
			text-align: center;
			font-size: 32upx;
		}

		.closeempty {
			position: absolute;
			top: 30upx;
			right: 30upx;
		}

		.waybillbox {
			background-color: #fff;
			margin-top: 30upx;
			border-radius: 20upx;
			padding: 20upx;

			.waybill {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24upx;

				image {
					width: 54upx;
					height: 54upx;
				}
			}

		}

		.waybillboxs {
			background-color: #fff;
			margin-top: 30upx;
			border-radius: 20upx;
			padding: 20upx;
			display: flex;
			justify-content: space-between;

			.waybill {
				display: flex;
			}
		}

		.radiobox {
			height: calc(30vh);
			background-color: #fff;
			margin-top: 30upx;
			border-radius: 20upx;
			overflow-y: scroll;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 30upx;
				align-items: center;

				.left {
					.name {
						font-size: 28upx;
						font-weight: 700;
					}
				}
			}
		}

		.btns {
			background-color: $color1;
			position: absolute;
			bottom: 30upx;
			left: 30upx;
			right: 30upx;
			padding: 20upx;
			text-align: center;
			color: #fff;
			border-radius: 40upx;
		}
	}

	::v-deep .uni-select {
		border: none !important;
	}
</style>
